<template>
    <view class="party-page">
        <view class="party-page-tabs">
            <scroll-view :scroll-x="true" class="scroll-tabs">
                <view
                    v-for="tab in tabs"
                    :key="tab.key"
                    :class="['tab-item', {'active': activeTab === tab.key}]"
                    @click="switchTab(tab.key)"
                >
                    {{ tab.label }}
                </view>
            </scroll-view>
        </view>
        <view class="section">
            <view v-if="activeTab === '1'" class="features">
                <view class="section-title">{{ $t('productDetail.party.productFeatures') }}</view>
                <view v-for="(item, index) in partyDetail.features" :key="index" class="features-item">
                    <view class="features-item-title">{{ item.title }}</view>
                    <view v-if="item.description" class="features-item-desc">{{ item.description }}</view>
                </view>
            </view>
            <view v-if="activeTab === '2'" class="schedule">
                <view class="section-title">{{ $t('productDetail.tabs.details') }}</view>
                <view v-for="(item, index) in partyDetail.schedule" :key="index" class="schedule-item">
                    <view class="schedule-title">{{ item.title }}</view>
                    <view v-for="(s, i) in item.items" :key="i" class="item-s">{{ s }}</view>
                </view>
                <view v-if="partyDetail.imageList">
                    <view v-for="(item, index) in partyDetail.imageList" :key="index" class="schedule-img">
                        <image :src="item" mode="widthFix" class="full-width-image" />
                    </view>
                </view>
            </view>
            <view v-if="activeTab === '3'" class="pricing">
                <view class="section-title">{{ $t('productDetail.tabs.feeDescription') }}</view>
                <view>
                    <view v-if="partyDetail.pricing.included" class="pricing-item">
                        <view class="pricing-item-title">{{ $t('productDetail.party.feeIncluded') }}</view>
                        <view v-for="(item, index) in partyDetail.pricing.included" :key="index">
                            <uni-icons type="checkmarkempty" size="15" color="#22c55e" style="margin-right: 10rpx"></uni-icons>
                            <text>{{ item }}</text>
                        </view>
                    </view>
                    <view v-if="partyDetail.pricing.excluded" class="pricing-item">
                        <view class="pricing-item-title">{{ $t('productDetail.party.feeExcluded') }}</view>
                        <view v-for="(item, index) in partyDetail.pricing.excluded" :key="index">
                            <uni-icons type="closeempty" size="15" color="#ef4444" style="margin-right: 10rpx"></uni-icons>
                            <text>{{ item }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="activeTab === '4'" class="usage">
                <view class="section-title">{{ $t('productDetail.tabs.usageMethod') }}</view>
                <view v-for="(item, index) in partyDetail.usage" :key="index" class="usage-item">
                    <view class="item-index">{{ index + 1 }}</view>
                    <view class="item-intro">
                        <view class="item-title">{{ item.title }}</view>
                        <view class="item-desc">{{ item.description  ||''}}</view>
                    </view>
                </view>
            </view>
            <view v-if="activeTab === '5'" class="refund">
                <view class="section-title">{{ $t('productDetail.tabs.refundPolicy') }}</view>
                <view>
                    <view v-if="partyDetail.refund.refundRule" class="refund-item">
                        <view class="refund-item-title">{{ $t('productDetail.party.refundPolicy') }}</view>
                        <view v-for="(item, index) in partyDetail.refund.refundRule" :key="index">
                            <text class="with-dot">{{ item }}</text>
                        </view>
                    </view>
                    <view v-if="partyDetail.refund.reformRule" class="refund-item">
                        <view class="refund-item-title">{{ $t('productDetail.party.reformPolicy') }}</view>
                        <view v-for="(item, index) in partyDetail.refund.reformRule" :key="index">
                            <text class="with-dot">{{ item }}</text>
                        </view>
                    </view>
                    <view v-if="partyDetail.refund.specialInstructions" class="refund-item">
                        <view class="refund-item-title">{{ $t('productDetail.party.specialCase') }}</view>
                        <view v-for="(item, index) in partyDetail.refund.specialInstructions" :key="index">
                            <text class="with-dot">{{ item }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="activeTab === '6'" class="notice">
                <view class="section-title">{{ $t('productDetail.tabs.notice') }}</view>
                <view>
                    <view v-if="partyDetail.notices.importantNote" class="notice-item">
                        <view class="notice-item-title">{{ $t('productDetail.party.importantTips') }}</view>
                        <view
                            v-for="(item, index) in partyDetail.notices.importantNote"
                            :key="index"
                            class="item-cont"
                        >
                            <image
                                src="https://wzws.wanshanlundiao.cn/upload/img/wsproduct/icons/exclamation-triangle-fill.svg"
                                mode="aspectFit"
                                class="item-img"
                            />
                            <text>{{ item }}</text>
                        </view>
                    </view>
                    <view v-if="partyDetail.notices.safetyInstructions" class="notice-item">
                        <view class="notice-item-title">{{ $t('productDetail.party.safetyNotice') }}</view>
                        <view
                            v-for="(item, index) in partyDetail.notices.safetyInstructions"
                            :key="index"
                            class="item-cont"
                        >
                            <image
                                src="https://wzws.wanshanlundiao.cn/upload/img/wsproduct/icons/shield-fill.svg"
                                mode="aspectFit"
                                class="item-img"
                            />
                            <text>{{ item }}</text>
                        </view>
                    </view>
                    <view v-if="partyDetail.notices.equipRecommendations" class="notice-item">
                        <view class="notice-item-title">{{ $t('productDetail.party.equipmentSuggestion') }}</view>
                        <view
                            v-for="(item, index) in partyDetail.notices.equipRecommendations"
                            :key="index"
                            class="item-cont"
                        >
                            <image
                                src="https://wzws.wanshanlundiao.cn/upload/img/wsproduct/icons/hiking.svg"
                                mode="aspectFit"
                                class="item-img"
                            />
                            <text>{{ item }}</text>
                        </view>
                    </view>
                    <view v-if="partyDetail.notices.otherNote" class="notice-item">
                        <view class="notice-item-title">{{ $t('productDetail.party.otherDescription') }}</view>
                        <view 
                            v-for="(item, index) in partyDetail.notices.otherNote"
                            :key="index"
                            class="item-cont"
                        >
                            <image
                                src="https://wzws.wanshanlundiao.cn/upload/img/wsproduct/icons/info-circle-fill.svg"
                                mode="aspectFit"
                                class="item-img"
                            />
                            <text>{{ item }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'PartyDetail',
    props: {
        partyDetail: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        return {
            tabs: [
                { label: this.$t('productDetail.tabs.productFeature'), key: '1' },
                { label: this.$t('productDetail.tabs.details'), key: '2' },
                { label: this.$t('productDetail.tabs.feeDescription'), key: '3' },
                { label: this.$t('productDetail.tabs.usageMethod'), key: '4' },
                { label: this.$t('productDetail.tabs.refundPolicy'), key: '5' },
                { label: this.$t('productDetail.tabs.notice'), key: '6' },
                { label: this.$t('productDetail.tabs.userReviews'), key: '7' },
            ],
            activeTab: '1',
        }
    },
    created() {
        this.switchTab(this.activeTab, false); 
    },
    methods: {
        switchTab(key, flag = true) {
            if (this.activeTab === key && flag) return;
            this.activeTab = key;
            let isShowComment = false;
            if (key === '7') isShowComment = true;
            this.$emit('myHtmlShowComment', isShowComment);
        },
    }
}
</script>

<style lang="scss" scoped>
.party-page {
    position: relative;
    padding-top: 80rpx;
    &-tabs {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        z-index: 100;
        border-bottom: 1rpx solid #eee;
        .scroll-tabs {
            white-space: nowrap;
            padding: 20rpx 0;
        }
        .tab-item {
            display: inline-block;
            padding: 0 30rpx;
            font-size: 28rpx;
            color: #666;
            line-height: 60rpx;
            &.active {
                color: #ff5f5f;
                font-weight: bold;
                border-bottom: 4rpx solid #ff5f5f;
            }
        }
    }
    .section {
        background-color: #fff;
        margin-top: 20rpx;
        padding: 0 32rpx 20rpx;
        &-title {
            font-size: $uni-font-size-lg;
            font-weight: bold;
            line-height: 80rpx;
        }
        .features {
            &-item {
                margin-bottom: 20rpx;
                border: 1px solid #e5e7eb;
                border-radius: 16rpx;
                padding: 24rpx;
                &-title {
                    font-size: $uni-font-size-base;
                    margin-bottom: 16rpx;
                }
                &-desc {
                    font-size: $uni-font-size-sm;
                    color: #666;
                }
            }
        }
        .schedule {
            &-item {
                margin-top: 20rpx;
                &:first-child {
                    margin-top: 0;
                }
                .schedule-title {
                    font-size: $uni-font-size-base;
                    margin-bottom: 10rpx;
                }
                .item-s {
                    font-size: $uni-font-size-sm;
                    line-height: 32rpx;
                }
            }
            &-img {
                margin-bottom: 20rpx;
                &:last-child {
                    margin-bottom: 0;
                }
                .full-width-image {
                    width: 100%;
                    height: 300rpx;
                    object-fit: cover;
                    border-radius: 16rpx;
                }
            }
        }
        .pricing {
            &-item {
                margin-top: 20rpx;
                &:first-child {
                    margin-top: 0;
                }
                &-title {
                    font-size: $uni-font-size-base;
                    font-weight: 600;
                }
                text {
                    font-size: $uni-font-size-sm;
                }
            }
        }
        .usage {
            &-item {
                display: flex;
                align-items: center;
                margin-bottom: 24rpx;
                &:last-child {
                    margin-bottom: 0;
                }
                .item-index {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 48rpx;
                    height: 48rpx;
                    background-color: #ffecee;
                    border-radius: 50%;
                    color: #ff4757;
                    margin-right: 16rpx;
                    font-size: $uni-font-size-base;
                }
                .item-intro {
                    .item-title {
                        font-size: $uni-font-size-base;
                        font-weight: 500;
                    }
                    .item-desc {
                        font-size: $uni-font-size-sm;
                    }
                }
            }
        }
        .refund {
            &-item {
                margin-top: 20rpx;
                &:first-child {
                    margin-top: 0;
                }
                &-title {
                    font-size: $uni-font-size-base;
                    font-weight: 600;
                }
                text {
                    font-size: $uni-font-size-sm;
                }
            }
        }
        .notice {
            &-item {
                margin-top: 20rpx;
                &:first-child {
                    margin-top: 0;
                }
                &-title {
                    font-size: $uni-font-size-base;
                    font-weight: 600;
                }
                .item-cont {
                    display: flex;
                    align-items: center;
                    height: 1.5rem;
                    .item-img {
                        width: 1rem;
                        height: 1rem;
                        margin-right: 12rpx;
                    }
                }
                text {
                    font-size: $uni-font-size-sm;
                }
            }
        }
    }
    .with-dot {
        position: relative;
        padding-left: 20rpx;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 16rpx;
            transform: translateY(-50%);
            width: 10rpx;
            height: 10rpx;
            background-color: #ccc;
            border-radius: 50%;
        }
    }
}
</style>